<template>
  <el-dialog
      :title="data.title"
      v-model="data.visible"
      width="40%"
      destroy-on-close
  >
    <el-form :model="data.appClient" label-position="left" :rules="data.rules" ref="data.appClient" size="small">
      <el-form-item prop="appName" label="应用名称" label-width="80px">
        <el-input type="text" placeholder="请输入" v-model="data.appClient.appName"/>
      </el-form-item>
      <el-form-item prop="appKey" label="应用key" label-width="80px">
        <el-input type="text" placeholder="请输入" :disabled="data.disable" v-model="data.appClient.appKey"/>
      </el-form-item>
      <el-row :gutter="24">
        <el-col :span="20">
        <el-form-item prop="appSecret" label="应用密钥" label-width="80px">
          <el-input type="text" placeholder="请点击生成按钮" disabled v-model="data.appClient.appSecret"/>
        </el-form-item>
        </el-col>
        <el-col :span="4">
        <el-form-item>
          <el-button type="primary" @click="getSecret" round :disabled="data.disable">生成密钥</el-button>
        </el-form-item>
        </el-col>
      </el-row>
      <el-form-item prop="redirectUrl" label="回调地址" label-width="80px">
        <el-input type="text" placeholder="请输入,格式为： https://域名/callback.html" v-model="data.appClient.redirectUrl"/>
      </el-form-item>
      <el-form-item prop="description" label="备注" label-width="80px">
        <el-input type="textarea" placeholder="请输入" v-model="data.appClient.description"/>
      </el-form-item>
    </el-form>

    <template #footer>
    <span class="dialog-footer">
      <el-button @click="resetDialog('data.appClient')">取 消</el-button>
      <el-button type="primary" @click="submitCli('data.appClient')">确 定</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script>
import {getCurrentInstance, reactive, ref} from "vue";
import {ElMessage} from "element-plus";

export default {
  name: "AppDialog",
  setup() {
    const {proxy} = getCurrentInstance()
    const data = reactive({
      visible: false,
      appClient: reactive({
        id: ref(0),
        appKey: ref(''),
        appSecret: ref(''),
        redirectUrl: ref(''),
        appName: ref(''),
        description: ref('')
      }),
      title: ref("新增"),
      disable: ref(false),
      rules: {
        appKey: [
          {required: true, message: '请输入应用ID', trigger: 'blur'}
        ],
        redirectUrl: [
          {required: true, message: '请输入应用回调地址', trigger: 'blur'}
        ],
        appName: [
          {required: true, message: '请输入应用名称', trigger: 'blur'}
        ],
        appSecret: [
          {required: true, message: "请生成密钥"}
        ]
      }
    })

    const setAppData = (params) => {
      console.log('------', params)
      if (params == null) {
        proxy.data.appClient = JSON.parse('{}')
        proxy.data.title = '新增应用'
        proxy.data.disable = false
      } else {
        proxy.data.appClient = JSON.parse(JSON.stringify(params))
        proxy.data.title = '更新应用'
        proxy.data.disable = true
      }
      proxy.data.visible = true
    }

    const resetDialog = (params) => {
      proxy.$refs[params].resetFields()
      proxy.data.visible = false
    }

    const submitCli = (formName) => {
      proxy.$refs[formName].validate((valid) => {
        if (!valid) {
          return;
        }
      })
      console.log(proxy.data.appClient.id)
      let tmp = proxy.data.appClient.id
      if (!tmp || typeof (tmp) == "undefined" || tmp === 0) {
        addApp()
      } else {
        updateApp()
      }
    }

    function updateApp() {
      proxy.$service.updateApp(proxy.data.appClient).then(result => {
        if (result.res.code === 0) {
          ElMessage.success({
            message: result.res.msg,
            type: 'success',
          })
          proxy.$parent.getAppList()
          proxy.resetDialog('data.appClient')
        } else {
          ElMessage.error(result.res.msg)
        }
      })
    }

    function addApp() {
      proxy.$service.insertApp(proxy.data.appClient).then(result => {
        if (result.res.code === 0) {
          ElMessage.success({
            message: result.res.msg,
            type: 'success',
          })
          proxy.$parent.getAppList()
          proxy.resetDialog('data.appClient')
        } else {
          ElMessage.error(result.res.msg)
        }
      })
    }

    const getSecret = () => {
      proxy.$service.getSecret().then(result => {
        if (result.res.code === 0) {
          proxy.data.appClient.appSecret=result.res.data
        } else {
          ElMessage.error(result.res.msg)
        }
      })
    }


    return {data, resetDialog, submitCli, setAppData, getSecret}
  }
}
</script>

<style scoped>

</style>